import React, { useEffect, useState, useCallback } from 'react';
import { Spin, Alert, Button } from 'antd';
import { SyncOutlined, SettingOutlined } from '@ant-design/icons';
import StatisticsOverview from './StatisticsOverview';
import LanguageStatistics from './LanguageStatistics';

interface BasicInfoProps {
    unitId: string;
    unitInfo?: any;
    statisticsData?: any; // 从父组件接收统计数据，避免重复请求
    onRefreshStatistics?: () => void; // 刷新统计数据的回调
}

const BasicInfo: React.FC<BasicInfoProps> = ({
    unitId,
    unitInfo,
    statisticsData: propStatisticsData,
    onRefreshStatistics
}) => {
    const [languageData, setLanguageData] = useState<any[]>([]);
    const [languageLoading, setLanguageLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    // 使用从父组件传递的统计数据
    const statisticsData = propStatisticsData;

    // 加载语言统计数据
    const loadLanguageData = useCallback(async () => {
        if (!unitId) return;

        setLanguageLoading(true);
        try {
            // 调用语言组成接口
            const { getLanguageComposition } = await import('../../../services/statistics');
            const response: any = await getLanguageComposition(unitId);

            // 验证响应数据
            if (response && Array.isArray(response)) {
                setLanguageData(response);
            } else if (response && response.data && Array.isArray(response.data)) {
                setLanguageData(response.data);
            } else {
                console.warn('语言组成数据格式异常:', response);
                setLanguageData([]);
            }
        } catch (error: any) {
            console.error('加载语言统计数据失败:', error);
            setLanguageData([]);
        } finally {
            setLanguageLoading(false);
        }
    }, [unitId]);

    useEffect(() => {
        loadLanguageData();
    }, [loadLanguageData]);

    const isLoading = languageLoading && !statisticsData;

    if (isLoading) {
        return (
            <div style={{ textAlign: 'center', padding: '40px' }}>
                <Spin size="large" />
                <div style={{ marginTop: '16px' }}>加载基本信息中...</div>
            </div>
        );
    }

    if (error) {
        return (
            <Alert
                message="加载失败"
                description={error}
                type="error"
                showIcon
                action={
                    <Button size="small" onClick={() => {
                        if (onRefreshStatistics) {
                            onRefreshStatistics();
                        }
                        loadLanguageData();
                    }}>
                        重试
                    </Button>
                }
            />
        );
    }

    return (
        <div style={{
            background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
            borderRadius: '12px',
            padding: '12px',
            minHeight: '100%'
        }}>
            {/* 页面标题区域 */}
            <div style={{
                marginBottom: '12px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between'
            }}>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '12px'
                }}>
                    <div style={{
                        width: '40px',
                        height: '40px',
                        borderRadius: '10px',
                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        boxShadow: '0 4px 12px rgba(102, 126, 234, 0.25)'
                    }}>
                        <SettingOutlined style={{
                            fontSize: '20px',
                            color: '#fff'
                        }} />
                    </div>
                    <div>
                        <h1 style={{
                            margin: 0,
                            fontSize: '20px',
                            fontWeight: '600',
                            color: '#1e293b',
                            lineHeight: '1.3'
                        }}>
                            单元配置总览
                        </h1>
                        <p style={{
                            margin: '2px 0 0 0',
                            fontSize: '12px',
                            color: '#64748b'
                        }}>
                            全面掌握单元的配置信息和运行状态
                        </p>
                    </div>
                </div>
                <Button
                    type="primary"
                    onClick={() => {
                        if (onRefreshStatistics) {
                            onRefreshStatistics();
                        }
                        loadLanguageData();
                    }}
                    loading={isLoading}
                    icon={<SyncOutlined />}
                    style={{
                        borderRadius: '8px',
                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                        border: 'none',
                        height: '36px',
                        padding: '0 16px',
                        fontSize: '13px',
                        fontWeight: '500',
                        boxShadow: '0 2px 8px rgba(102, 126, 234, 0.25)'
                    }}
                >
                    刷新数据
                </Button>
            </div>

            {/* 统计概览信息 */}
            <StatisticsOverview statisticsData={statisticsData} />

            {/* 语言统计信息 */}
            <LanguageStatistics
                languageData={languageData}
                languageLoading={languageLoading}
                loadLanguageData={loadLanguageData}
            />
        </div>
    );
};

export default BasicInfo;
